import React, { useContext, useEffect, useState } from 'react';
import { IconRefresh } from '@arco-design/web-react/icon';
import {
  Form,
  Button,
  Grid,
  Input,
  Space,
  DatePicker,
  Select,
} from '@arco-design/web-react';
import { GlobalContext } from '@/context';
import useLocale from '@/utils/useLocale';
import locale from './locale';
import styles from './style/index.module.less';
import debounce from 'lodash/debounce';
import dayjs from 'dayjs';
import { EnumsRes } from '@/api/interface';
import { Enums } from '@/api/modules';
import useIsMountedRef from '@/utils/useIsMountedRef';

const { Row, Col } = Grid;
const { useForm } = Form;
const Option = Select.Option;

function SearchForm(props: {
  onSearch: (values: Record<string, unknown>) => void;
  rtl: boolean;
}) {
  const t = useLocale(locale);

  const { lang } = useContext(GlobalContext);

  const [form] = useForm();

  const handleSubmit = debounce(() => {
    const values = form.getFieldsValue();
    if (values.q) {
      values.q = values.q.trim();
    }
    props.onSearch(values);
  }, 300);

  const handleReset = () => {
    form.resetFields();
    props.onSearch({});
  };

  const colSpan = 12;

  const isMountedRef = useIsMountedRef();

  useEffect(() => {
    getEnums();
  }, []);

  const [enums, setEnums] = useState<{ [key: string]: EnumsRes[] }>({
    ComplainantEnums: [],
  });

  const getEnums = async () => {
    try {
      const enumData = await Promise.all([Enums({ type: 'ComplainantEnums' })]);
      if (isMountedRef.current) {
        setEnums({
          ComplainantEnums: enumData[0].data,
        });
      }
    } catch (e) {}
  };

  return (
    <div className={styles['search-form-wrapper']}>
      <Form
        form={form}
        className={styles['search-form']}
        labelAlign="right"
        labelCol={{ span: 7 }}
        wrapperCol={{ span: 17 }}
        onValuesChange={handleSubmit}
      >
        <Row gutter={24}>
          <Col span={colSpan}>
            <Form.Item label={t['searchTable.columns.keyword']} field="q">
              <Input
                placeholder={t['searchForm.keyword.placeholder']}
                allowClear
              />
            </Form.Item>
          </Col>

          <Col span={colSpan}>
            <Form.Item label={t['searchTable.columns.date']} field="expiredAt">
              <DatePicker.RangePicker
                allowClear
                style={{ width: '100%' }}
                disabledDate={(date) => dayjs(date).isAfter(dayjs())}
              />
            </Form.Item>
          </Col>

          <Col span={colSpan}>
            <Form.Item
              label={t['searchTable.columns.complainant']}
              field="applicantType"
            >
              <Select
                allowClear
                placeholder={t['searchTable.select.placeholder']}
              >
                {enums.ComplainantEnums.map((option, index) => (
                  <Option key={index} value={option.key}>
                    {option.value[lang === 'en-US' ? 'en' : 'ar']}
                  </Option>
                ))}
              </Select>
            </Form.Item>
          </Col>
        </Row>
      </Form>
      <Space
        className={props.rtl ? styles['right-button1'] : styles['right-button']}
      >
        {/* <Button type="primary" icon={<IconSearch />} onClick={handleSubmit}>
          {t['searchTable.form.search']}
        </Button> */}
        <Button
          icon={<IconRefresh />}
          onClick={handleReset}
          className={styles['button']}
        >
          {t['searchTable.form.reset']}
        </Button>
      </Space>
    </div>
  );
}

export default SearchForm;
